<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>login</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
    <link rel="stylesheet" href="./static/chat/css/style.css">
    <link rel="stylesheet" href="./static/chat/css/login.css">

</head>
<body>

<div class="div-header">
    <a class="logo" href="/">
        <img src="./static/chat/image/logo.png" alt="logo">
        <span class="logo-font">聊天室</span>
    </a>
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="./login.php">登录</a>
        </li>
<!--        <li class="layui-nav-item">-->
<!--            <a href="./register.html">注册</a>-->
<!--        </li>-->
    </ul>
</div>
<form  method="post" action="./chat.php">
    <div class="login">
        <div>
            <div class="login-den">
                聊天室
            </div>
            <div class="login-input">
                <input type="text" placeholder="请输入用户名" id="username" name="username">
            </div>
<!--            <div class="login-input">-->
<!--                <input type="password" placeholder="请输入密码" id="pwd">-->
<!--            </div>-->
            <div class="div-btn">
<!--                <div class="btn-reg"><a href="./register.html">注册</a></div>-->
                <input class="input-submit" type="submit" value="登录">
            </div>
        </div>
    </div>
</form>
<script src="static/layui/layui.js"></script>
<script src="static/chat/js/jquery.min.js"></script>
<script>
    layui.use(['layer','form'], function(){
        var layer = layui.layer;
        var form = layui.form;

        $(function(){
            // $("input[type='submit']").attr("disabled",　true);
            $('.input-submit').click(function(){
                // 接值
                var _u = $('#username').val();
                // 验证
                var _username = _u.replace(/\s/g,"");
                // 验证不能为空
                if(_username == ''){layer.msg('用户名不能为空');return false;}
                //验证不能有特殊字符
                var patrn = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;
                if (patrn.test(_username)) { // 如果包含特殊字符返回false
                    layer.msg('用户名不能包含特殊字符');
                    return false;
                }
                //验证长度
                var _usernameLen = _username.length;
                if(_usernameLen < 2 || _usernameLen > 8){
                    layer.msg('用户名必须是2-8位字符');
                    return false;
                }

                form.on('submit(formDemo)', function(data){
                    // layer.msg(JSON.stringify(data.field));
                    return false;
                });

            })
        });

    });



</script>
</body>
</html>
